import React, { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import { Table } from 'antd'

// 使用React.memo对FC进行性能优化
export const NewsPublish = React.memo(props => {
  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      width: '40%',
      align: 'center',
      render: (title, { id }) => <NavLink to={`/news-manage/preview/${id}`}>{title}</NavLink>
    },
    {
      title: '作者',
      dataIndex: 'author',
      align: 'center',
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      align: 'center',
      render: category => category.title
    },
    {
      title: '操作',
      align: 'center',
      // 渲染时，调用props传来的button方法，得到返回值（也就是Button组件）
      // 点击时，record.id传入onClick方法内部，获取点击的新闻id
      render: record => props.button(record.id)
    }
  ]

  return (
    <Fragment>
      <Table
        dataSource={props.dataSource}
        columns={columns}
        rowKey={item => item.id}
      />
    </Fragment>
  )
})